import type { FC } from "react";
import type { CascaderOptions } from "../Cascader/type";
import { DurationUnitOption, PresetValue } from "../TimeRangePicker/type";

type QuickFilterItems = Array<QuickFilterItem>;

type QuickFilterItemValidate = (
  value?: string | number | boolean | Array<string | number | boolean>
) => { isValid: boolean; errmsg?: string } | undefined;

export type QuickFilterItemType =
  | "string"
  | "number"
  | "time_range"
  | "datetime"
  | "cascader"
  | "select"
  | "multi_select"
  | "tag_choice"
  | "multi_type_time";

export type QuickFilterItem =
  | {
      key: string;
      label: string;
      placeholder?: string;
      /** @deprecated 使用 itemSelection*/
      defaultVisible?: boolean;
      type: QuickFilterItemType;
      options?: QuickFilterItemOptionsType;
      validate?: QuickFilterItemValidate;
      meta?: {
        /** cascader */
        placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
        cascaderChangeOnSelect?: boolean;
        cascaderLoadData?: (
          selectOptions: CascaderOptions
        ) => QuickFilterItemOptions;
        selectWithSearch?: boolean;
        /**multi_type_time**/
        relativeItems?: string[]; //isoDurationString
        presetItems?: PresetValue[];
        durationUnitOptions?: DurationUnitOption[];
        /** time_range **/
        startDatePlaceholder?: string;
        endDatePlaceholder?: string;
        startTimePlaceholder?: string;
        endTimePlaceholder?: string;
        clearText?: string;
        okText?: string;
        isChinese?: boolean;
      };
    }
  | {
      key: string;
      label: string;
      placeholder?: string;
      /** @deprecated 使用 itemSelection*/
      defaultVisible?: boolean;
      type: "custom";
      options?: QuickFilterItemOptionsType;
      validate?: QuickFilterItemValidate;
      component: FC<{
        value: any;
        placeholder?: string;
        options?: QuickFilterItemOptionsType;
        onChange: (value?: any, visible?: boolean) => void;
      }>;
      // 在 label 上怎么显示 value
      valueLabel?: (value: any) => undefined | string | Array<string>;
    };

export type QuickFilterItemOptionsType =
  | ((
      searchText?: string,
      selectedValue?: Array<string | number>
    ) => Promise<QuickFilterItemOptions>)
  | QuickFilterItemOptions;

export type QuickFilterItemOptions = Array<{
  label: string;
  value: string | number;
  children?: QuickFilterItemOptions;
}>;

export interface QuickFilterItemSelection {
  selectedItemKeys?: string[];
  onChange?: (
    selectedItemKeys: string[],
    selectedItems: QuickFilterItems
  ) => void;
}

export interface QuickFilterProps<VALUE extends Record<string, any>> {
  items: QuickFilterItems;
  value?: VALUE;
  shadow?: boolean;
  searchKey?: string;
  moreButton?: boolean;
  tailSlot?: React.ReactNode;
  onChange?: (value: VALUE) => void;
  // 用于控制筛选项的显示隐藏
  itemSelection?: QuickFilterItemSelection;
  // 筛选内容为空时显示内容，默认为‘全部’
  emptyLabel?: string;
  getItemPopupContainer?: (node: HTMLElement) => HTMLElement;
}
